<template>
<div>
  <div class="nav">
      <p>点对点</p>
  </div>
  <div class="choose">
      <p>筛选</p>
      <a href="#"></a>
  </div>
  <div class="space"></div>
  <div class="content" v-for="(item,index) in p_goods" :key="index">
      <ul>
        <li>
          <img src="../assets/touxiang.png" alt="">
          <p>黑猫咪</p>
        </li>
        <li>
          <p>出售{{item.fish.fish_name}}：<span>{{item.stock}}条</span></p>
          <p>期望价格：<span>{{item.price}}元</span></p>
          <p>发布时间：<span class="specal">{{item.update_time}}</span></p>
        </li>
        <li>
          <span @click="gobuy()">立即购买</span>
        </li>
      </ul>
  </div>
  
</div>
</template>

<script>
import api from "../axios/api"
export default {
  data(){
    return{
      p_goods:[],
    }
  },
  mounted(){
    this.fishpage()
  },
  methods:{
    gobuy(){
      this.$router.push("p_buy")
    },
    fishpage(){
            let data = {
                page:1  
            }
            this.$post(api.fishpage,data).then(res=>{
                if(res.code == 0){
                    this.p_goods = res.data
                }else{
                   this.$toast(res.error) 
                }
            })
        },
  }
}
</script>

<style lang="less" scoped>
.space {
  height: 6px;
  background-color: #f6f6f6;
}

  .nav {
     background-image:linear-gradient( 180deg, rgb(253,127,51) 0%, #fe6b10 99%);
     height: 40px;
     line-height: 40px;
     text-align: center;
    p{
      color: #fff;
    }
  }
  .choose {
    display: flex;
    flex-wrap: wrap;
    height: 30px;
    margin: 5px 20px;
    p{
      color: #fe6b10;
      width: 100%;
      font-size: 14px;
    }
    a{
      width: 10px;
      height: 10px;
      background: url("../assets/b_ico.png") no-repeat;
      background-size: 100%;
      margin-left: 10px;
    }
  }
  .content {
    height: 80px;
    border-bottom: 1px solid #f6f6f6;
    ul{
      display: flex;
      margin: 15px;
      font-size: 14px;
      li{
        display: flex;
        flex-wrap: wrap;
      }
      li:nth-child(1){
        width: 30%;
        img{
          width: 50px;
          height: 50px;
        }
        p{
          margin-top: 3px;
          width: 100%;
          margin-left: 5px;
          font-size: 13px;
        }
      }
      li:nth-child(2){
        width: 75%;
        p{
          width: 100%;
          .specal {
              font-size: 12px;
              color: #ccc;
              font-weight: 500;
            }
          span {
            color: #fe6b10;
            font-weight: 600;
          }
        }
      }
      li:nth-child(3){
          width: 20%;
          line-height: 50px;
          span {
            margin-top: 10px;
            width: 70px;
            height: 28px;
            text-align: center;
            color: #fff;
            font-size: 12px;
            border-radius: 3px;
            line-height: 28px;
             background-image:linear-gradient( 90deg, rgb(253,127,51) 0%, rgb(250,44,34) 99%);
          }
      }
    }
  }
</style>